<template>
  <div class="approvals-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><CircleCheck /></el-icon>
          <div class="header-text">
            <h2>审批管理</h2>
            <p>流程审批和管理</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="showDialog = true">
            <el-icon><Plus /></el-icon>
            发起审批
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 审批统计 -->
    <div class="stats-row">
      <el-card shadow="hover" class="stat-card" @click="filterStatus = 'pending'">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#E6A23C"><Clock /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.pending }}</div>
            <div class="stat-label">待我审批</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card" @click="filterStatus = 'processing'">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#409EFF"><Loading /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.processing }}</div>
            <div class="stat-label">审批中</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card" @click="filterStatus = 'approved'">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#67C23A"><SuccessFilled /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.approved }}</div>
            <div class="stat-label">已通过</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card" @click="filterStatus = 'rejected'">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#F56C6C"><CircleClose /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.rejected }}</div>
            <div class="stat-label">已拒绝</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 审批列表 -->
    <el-card shadow="never">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待我审批" name="pending" />
        <el-tab-pane label="我已审批" name="reviewed" />
        <el-tab-pane label="我发起的" name="initiated" />
        <el-tab-pane label="抄送我的" name="cc" />
      </el-tabs>

      <el-table :data="filteredApprovals" stripe>
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="编号" width="100" />
        <el-table-column prop="title" label="审批标题" min-width="200">
          <template #default="{ row }">
            <el-text class="approval-title" @click="handleView(row)" style="cursor: pointer; color: #409EFF;">
              {{ row.title }}
            </el-text>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="审批类型" width="120">
          <template #default="{ row }">
            <el-tag>{{ getTypeName(row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="initiator" label="发起人" width="100" />
        <el-table-column prop="currentApprover" label="当前审批人" width="120" />
        <el-table-column prop="createTime" label="发起时间" width="160" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusName(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleView(row)">
              <el-icon><View /></el-icon>
              查看
            </el-button>
            <el-button
              link
              type="success"
              @click="handleApprove(row)"
              v-if="row.status === 'pending' && activeTab === 'pending'"
            >
              <el-icon><CircleCheck /></el-icon>
              通过
            </el-button>
            <el-button
              link
              type="danger"
              @click="handleReject(row)"
              v-if="row.status === 'pending' && activeTab === 'pending'"
            >
              <el-icon><CircleClose /></el-icon>
              拒绝
            </el-button>
            <el-button link type="info" @click="handleRevoke(row)" v-if="row.status === 'processing' && activeTab === 'initiated'">
              <el-icon><RefreshLeft /></el-icon>
              撤回
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 20px; justify-content: flex-end;"
      />
    </el-card>

    <!-- 发起审批对话框 -->
    <el-dialog v-model="showDialog" title="发起审批" width="700px" destroy-on-close>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="审批类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择审批类型" style="width: 100%">
            <el-option label="请假申请" value="leave" />
            <el-option label="报销申请" value="expense" />
            <el-option label="出差申请" value="travel" />
            <el-option label="加班申请" value="overtime" />
            <el-option label="采购申请" value="purchase" />
            <el-option label="用章申请" value="seal" />
          </el-select>
        </el-form-item>
        <el-form-item label="审批标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入审批标题" />
        </el-form-item>
        <el-form-item label="审批内容" prop="content">
          <el-input v-model="form.content" type="textarea" :rows="6" placeholder="请输入审批内容" />
        </el-form-item>
        <el-form-item label="审批人" prop="approvers">
          <el-select v-model="form.approvers" multiple placeholder="请选择审批人" style="width: 100%">
            <el-option label="张三" value="1" />
            <el-option label="李四" value="2" />
            <el-option label="王五" value="3" />
            <el-option label="赵六" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="抄送人" prop="cc">
          <el-select v-model="form.cc" multiple placeholder="请选择抄送人" style="width: 100%">
            <el-option label="张三" value="1" />
            <el-option label="李四" value="2" />
            <el-option label="王五" value="3" />
            <el-option label="赵六" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            action="#"
            :auto-upload="false"
            multiple
          >
            <el-button>选择文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </template>
    </el-dialog>

    <!-- 审批详情对话框 -->
    <el-dialog v-model="showDetailDialog" title="审批详情" width="800px">
      <el-descriptions :column="2" border v-if="currentApproval">
        <el-descriptions-item label="审批编号">{{ currentApproval.id }}</el-descriptions-item>
        <el-descriptions-item label="审批类型">{{ getTypeName(currentApproval.type) }}</el-descriptions-item>
        <el-descriptions-item label="发起人">{{ currentApproval.initiator }}</el-descriptions-item>
        <el-descriptions-item label="发起时间">{{ currentApproval.createTime }}</el-descriptions-item>
        <el-descriptions-item label="审批状态">
          <el-tag :type="getStatusType(currentApproval.status)">
            {{ getStatusName(currentApproval.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="当前审批人">{{ currentApproval.currentApprover }}</el-descriptions-item>
        <el-descriptions-item label="审批内容" :span="2">
          审批申请的详细内容...
        </el-descriptions-item>
      </el-descriptions>

      <el-divider>审批流程</el-divider>
      <el-timeline>
        <el-timeline-item
          v-for="(step, index) in approvalSteps"
          :key="index"
          :timestamp="step.time"
          :type="step.status === 'approved' ? 'success' : step.status === 'rejected' ? 'danger' : 'primary'"
          placement="top"
        >
          <el-card>
            <div class="step-header">
              <span class="step-title">{{ step.title }}</span>
              <el-tag :type="step.status === 'approved' ? 'success' : step.status === 'rejected' ? 'danger' : 'warning'" size="small">
                {{ step.status === 'approved' ? '已通过' : step.status === 'rejected' ? '已拒绝' : '待审批' }}
              </el-tag>
            </div>
            <div class="step-content">
              <span>审批人：{{ step.approver }}</span>
              <p v-if="step.comment">意见：{{ step.comment }}</p>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  CircleCheck, Plus, Clock, Loading, SuccessFilled, CircleClose,
  View, RefreshLeft
} from '@element-plus/icons-vue'

// 状态
const activeTab = ref('pending')
const filterStatus = ref('')

// 统计数据
const stats = reactive({
  pending: 8,
  processing: 12,
  approved: 45,
  rejected: 3
})

// 分页
const pagination = reactive({
  page: 1,
  size: 10,
  total: 68
})

// 审批数据
const approvals = ref([
  {
    id: 'AP2024011501',
    title: '请假申请-年假',
    type: 'leave',
    initiator: '张三',
    currentApprover: '李四',
    createTime: '2024-01-15 09:00',
    status: 'pending'
  },
  {
    id: 'AP2024011502',
    title: '报销申请-差旅费',
    type: 'expense',
    initiator: '王五',
    currentApprover: '赵六',
    createTime: '2024-01-15 10:30',
    status: 'processing'
  },
  {
    id: 'AP2024011403',
    title: '出差申请-客户拜访',
    type: 'travel',
    initiator: '李四',
    currentApprover: '',
    createTime: '2024-01-14 14:00',
    status: 'approved'
  },
  {
    id: 'AP2024011304',
    title: '加班申请-项目赶工',
    type: 'overtime',
    initiator: '赵六',
    currentApprover: '',
    createTime: '2024-01-13 16:30',
    status: 'rejected'
  }
])

// 审批流程
const approvalSteps = ref([
  {
    title: '发起申请',
    approver: '张三',
    time: '2024-01-15 09:00',
    status: 'approved',
    comment: ''
  },
  {
    title: '部门主管审批',
    approver: '李四',
    time: '2024-01-15 10:30',
    status: 'approved',
    comment: '同意'
  },
  {
    title: '人事审批',
    approver: '王五',
    time: '',
    status: 'pending',
    comment: ''
  }
])

// 对话框
const showDialog = ref(false)
const showDetailDialog = ref(false)
const formRef = ref(null)
const currentApproval = ref(null)

// 表单
const form = reactive({
  type: '',
  title: '',
  content: '',
  approvers: [],
  cc: []
})

// 表单验证规则
const rules = {
  type: [{ required: true, message: '请选择审批类型', trigger: 'change' }],
  title: [{ required: true, message: '请输入审批标题', trigger: 'blur' }],
  content: [{ required: true, message: '请输入审批内容', trigger: 'blur' }],
  approvers: [{ required: true, message: '请选择审批人', trigger: 'change' }]
}

// 计算属性
const filteredApprovals = computed(() => {
  let result = approvals.value
  if (filterStatus.value) {
    result = result.filter(a => a.status === filterStatus.value)
  }
  return result
})

// 方法
const handleView = (row) => {
  currentApproval.value = row
  showDetailDialog.value = true
}

const handleApprove = (row) => {
  ElMessageBox.prompt('请输入审批意见', '审批通过', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputType: 'textarea'
  }).then(() => {
    row.status = 'approved'
    ElMessage.success('审批通过')
  }).catch(() => {})
}

const handleReject = (row) => {
  ElMessageBox.prompt('请输入拒绝原因', '审批拒绝', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputType: 'textarea',
    inputValidator: (value) => {
      if (!value) {
        return '请输入拒绝原因'
      }
      return true
    }
  }).then(() => {
    row.status = 'rejected'
    ElMessage.success('已拒绝')
  }).catch(() => {})
}

const handleRevoke = (row) => {
  ElMessageBox.confirm('确定要撤回该审批吗？', '提示', {
    type: 'warning'
  }).then(() => {
    row.status = 'revoked'
    ElMessage.success('已撤回')
  }).catch(() => {})
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('提交成功')
      showDialog.value = false
    }
  })
}

const getTypeName = (type) => {
  const map = {
    leave: '请假申请',
    expense: '报销申请',
    travel: '出差申请',
    overtime: '加班申请',
    purchase: '采购申请',
    seal: '用章申请'
  }
  return map[type] || type
}

const getStatusName = (status) => {
  const map = {
    pending: '待审批',
    processing: '审批中',
    approved: '已通过',
    rejected: '已拒绝',
    revoked: '已撤回'
  }
  return map[status] || status
}

const getStatusType = (status) => {
  const map = {
    pending: 'warning',
    processing: '',
    approved: 'success',
    rejected: 'danger',
    revoked: 'info'
  }
  return map[status] || ''
}
</script>

<style scoped>
.approvals-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  cursor: pointer;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.approval-title:hover {
  text-decoration: underline;
}

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.step-title {
  font-weight: 500;
}

.step-content {
  font-size: 14px;
  color: #606266;
}

.step-content p {
  margin: 8px 0 0 0;
}
</style>

